﻿body,
html {
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
        }

* {
  margin: 0;
  padding: 0;
}
/* 红包首页 */
.container {
  height: 100%;
  overflow: auto;
  background: #000;
  position: relative;
}

.container .red_packets{
  width: 6rem;
  height: 10rem;
  background: url(../images/open_bg.png) no-repeat;
  background-size: 6rem 10rem;
  color: #FFE4B2;
  text-align: center;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: dong .2s linear 2;
}
@keyframes dong {
  0%{
    transform:translate(-50%,-50%) scale(0.9);
  }
  100%{
    transform: translate(-50%,-50%) scale(1.0);
  }
}

.red_packets .user_msg{
  font-size: 4vw;
  padding-top: 20vw;
}

.user_msg .user_photo{
  width: 6vw;
  border-radius: 5px;
  vertical-align: middle;
}

.user_msg .user_name{
  vertical-align: middle;
}

.red_packets .red_title{
  font-size: 5.5vw;
  padding-top: 5vw;
}

.red_packets .open_kai{
  padding-top: 4rem;
}

.red_packets .open_kai img{
  width: 2.2rem;
  height: auto;
}

@keyframes rotating{
  from{
    transform:rotateY(0)
  }
  to{
    transform:rotateY(360deg)}
  }
  
.animate{
  animation:rotating 1s linear infinite;
}

/* 红包领取页面 */

.receive_box{
  width: 100vw;
  height: 100%;
  background: #fff;
}

.detail_box{
  width: 100%;
  height: 8rem;
  background: url(./dar/images/receive_list.png) no-repeat;
  background-size: 100% 8rem;
  color: #FFE4B2;
  text-align: center;
  padding-top: .1rem;
  font-size: .3rem;
}

.detail_box .record_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .15rem;
}

.record_wrap img{
  width: .3rem;
}

.record_wrap span{
  font-size: .28rem;
}

.detail_box .detail_msg{
  font-size: 5vw;
  margin-top: .3rem;
}

.detail_msg .user_photo{
  width: 8vw;
  height: 8vw;
  border-radius: 5px;
  vertical-align: middle;
}

.detail_msg .user_name{
  vertical-align: middle;
}

.detail_box .money_box{
  font-size: 3vw;
  padding-top: 0.5rem;
}

.money_num{
  font-size: 15vw;
}

.detail_box .btn{
  margin: 0 auto;
  margin-top:.45rem;
  background: #ffe4b2;
  color: #f25543;
  width:3rem;
  border-radius: .5rem;
  font-weight:600;
  cursor: pointer;
  padding:.15rem;
  font-size:.4rem;
  animation: Updown .5s infinite alternate;
}

@keyframes Updown {
  from {
    transform:scale(1.1);
  }
  to {
    transform:scale(1);
  }
}

.receive_list .tips{
  color: #8C8C8C;
  padding-left: 3vw;
}

.receive_list .list_item {
  display: flex;
  margin-left: 3vw;
  align-items: center;
}

.list_item .headimg {
  width: 10vw;
  height: 10vw;
  background: pink;
  margin-right: 3vw;
  border-radius: 5px;
  overflow: hidden;
}

.list_item .headimg img {
  width: 100%;
  height: 100%;
}

.list_item .item_desc {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 3vw;
  padding-right: 3vw;
  padding-bottom: 3vw;
  border-bottom: 1px solid #F0F0F0;
}

.list_item .name_money {
  display: flex;
  justify-content: space-between;
}

.list_item .time {
  color: #B0B0B0;
}

.tan_frame{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  overflow: hidden;
}

.fenxiang_w {
  width: 100%;
  /* position: fixed; */
  /* z-index: 999; */
  /* top: 0px; */
  /* left: 0px; */
  /* margin-left: auto; */
  /* margin-right: auto; */
}

/* .tan_frame .content{
  background: #fff;
  width: 5rem;
  height: 7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  text-align: center;
  padding: .2rem 0;
}

.content .title{
  color: rgb(38,133,120);
  color: #006600;
  font-size: .5rem;
  font-weight: 600;
}

.content .active_data{
  display: flex;
  flex-direction: column;
  line-height: .6rem;
  padding: .55rem .3rem;
  font-size: .35rem;
}

.active_data span{
  color: red;
}

.active_data .obtain{
  color: #8C8C8C;
}

.active_data .active_money{
  color: #aaa;
}

.font_px{
  color: #e4393c;
}

.font_px .user_money{
  font-weight: 600;
  font-size: .5rem;
}

.active_money .money_number{
  color: #e4393c;
  font-size: .4rem;
  font-weight: 600;
}

.line_wrap{
  height: 1px;
  background: #ddd;
}

.go_frame{
  margin: 0 auto;
  margin-top: .2rem;
  padding: .2rem;
  border-radius: .4rem;
  width: 3rem;
  background: rgb(38,133,120);
  color: #fff;
} */
